<include file="/public/header" />
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: '7156d1a798a03528b14cd669b194413b',
    }
</script>
<script
    src="https://webapi.amap.com/maps?v=2.0&key=81fed9345d752098eb43bfbacea4b2bf&plugin=AMap.AutoComplete,AMap.PlaceSearch">
    </script>
<div class="layui-fluid">
    <div class="layui-card">
        <!-- // 默认操作按钮 -->
        <div class="layui-card-header layadmin-card-header-auto ">
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline ">
                            <input name="nickname" class="layui-input" type="text" placeholder="{:__('姓名、电话关键字搜索')}" />
                        </div>
                    </div>

                    <div class="layui-inline">
                        <!-- // 默认搜索 -->
                        <button class="layui-btn icon-btn" lay-filter="formSearch" lay-submit><i
                                class="layui-icon layui-icon-search"></i>{:__('搜索')}</button>
                        <button data-area="762px,500px" class="layui-btn icon-btn" lay-open=""
                            data-title="{:__('添加')}{:__('客户')}"  data-url="#editforms" callback="edits"
                            lay-event="add">
                            <i class="layui-icon layui-icon-add-1"></i>{:__('添加')}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- // 创建数据实例 -->
        <table id="lay-tableList" lay-filter="lay-tableList"></table>
    </div>
</div>

<!-- // 添加编辑数据 -->
<script type="text/html" id="editforms">
    <div class="layui-fluid layui-bg-white" >
        <form class="layui-form layui-form-fixed" lay-filter="editforms" >
        <input type="text" name="id" hidden="">              
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('姓名')}</label>
            <div class="layui-input-block">
                <input name="name" placeholder="{:__('请输入姓名')}" type="text" class="layui-input"  lay-verify="required" />
            </div>
        </div>  
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('手机号')}</label>
            <div class="layui-input-block">
                <input name="mobile" placeholder="{:__('请输入手机号')}" type="text" class="layui-input"  lay-verify="required" />
            </div>
        </div>    
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('定位地址')}</label>
            <div class="layui-input-block">
                <input name="latlon" type="hidden" class="layui-input" value=""/>
                <input name="readdress" z-index="999999999999" id="tipinput" placeholder="{:__('请输入详细地址')}" type="text" class="layui-input"  lay-verify="required" />
                <div id="sousuo" style="position:absolute;z-index:999999;background:#fff;padding:5px;border:1px solid #dedede">
                </div>
            </div>
        </div> 
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('详细地址')}</label>
            <div class="layui-input-block">
                <input name="address" placeholder="{:__('详细地址')}" type="text" class="layui-input"/>
            </div>
        </div> 
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('备注')}</label>
            <div class="layui-input-block">
                <input name="remark" placeholder="{:__('请输入备注')}" type="text" class="layui-input"/>
            </div>
        </div> 
        <div class="layui-footer layui-form-item layui-center "  >
            <button class="layui-btn layui-btn-primary" type="button" sa-event="closePageDialog" >{:__('取消')}</button>
            <button class="layui-btn" lay-add="{:url('/system/kehu/add')}" lay-edit="{:url('/system/kehu/edit')}" lay-filter="submitPage" data-reload="self" lay-submit>{:__('提交')}</button>
        </div>
        </form>
    </div>
</script>


<!-- // 列表工具栏 -->
<script type="text/html" id="tableBar">
    <a class="layui-table-text" data-title="{:__('编辑信息')}" data-area="762px,500px"  callback="edits"  data-url="#editforms" lay-event="edit">{:__('编辑')}</a>
    <div class="layui-divider layui-divider-vertical"></div>
    <a class="layui-table-text" data-url="{:url('/system/kehu/del')}?id={{d.id}}" lay-event="del">{:__('删除')}</a>
</script>

<include file="/public/footer" />
<script>
    layui.use(['admin', 'table', 'form'], function () {
        var admin = layui.admin;
        var table = layui.table;
        var form = layui.form;
        /*
         * 初始化表格
        */
        var isTable = table.render({
            elem: "#lay-tableList"
            , url: "{:url('/system/kehu/index')}"
            , page: true
            , limit: 18
            , cols: [[
                { type: 'checkbox', width: 50 },
                { field: 'id', align: 'center', sort: true, width: 80, title: 'ID' },
                { field: 'name', align: 'center', width: 180, title: '{:__("姓名")}' },
                { field: 'mobile', align: 'center', width: 180, title: '{:__("手机号")}' },
                { field: 'readdress', align: 'center', title: '{:__("定位地址")}' },
                { field: 'address', align: 'center', width: 180, title: '{:__("详细地址")}' },
                { field: 'remark', align: 'center', width: 180, title: '{:__("备注")}' },
                { field: 'create_time', align: 'center', width: 180, title: '{:__("录入时间")}' },
                { align: 'center', toolbar: '#tableBar', width: 300, title: '{:__("操作")}' },
            ]]
        })

        // 添加 / 编辑用户
        admin.callback.edits = function (clickthis, colletction, config) {
            // 获取表格对象
            var tableThis = colletction.tableThis,
                status = typeof (tableThis) === "undefined" ? true : false;

            //默认隐藏地址信息
            layui.$('#sousuo').hide();
            //点击元素外其它地方隐藏
            layui.$('body').bind('click', function (event) {
                layui.$('#sousuo').hide();
            });
            //阻止冒泡
            layui.$('#sousuo').click(
                function (e) {
                    e.stopPropagation()
                }
            );
            //输入框的值改变时触发
            layui.$("#tipinput").on("input", function (e) {
                //获取input输入的值
                layui.$.get("{:url('/ajax/getaddress')}",
                    { keyword: e.delegateTarget.value }, function (res) {
                        if (res.code == 200) {
                            str = '';
                            layui.$.each(res.data, function (i, obj) {
                                str += '<input lay-filter="getsou" type="radio" name="suosuo" value="' + obj.location + '" title="' + obj.name + '[' + obj.address + ']' + '"><br/>';
                            });
                            layui.$('#sousuo').html(str);
                            layui.$('#sousuo').show();
                            form.render();
                        } else {
                            layui.$('#sousuo').html();
                            layui.$('#sousuo').hide();
                            form.render();
                        }

                    }, 'json');
            });
            //监听地址选择
            form.on('radio(getsou)', function (data) {
                console.log(data);
                var location = data.value.split(","); //字符分割 
                if (location.length >= 2) {
                    layui.$('#sousuo').hide();
                    layui.$("input[name='latlon']").val(data.value);
                } else {
                    layer.msg('数据错误，请重试');
                }

            });
            // 监听权限提交
            form.on("submit(submitPage)", function (post) {
                // 获取用户id
                var pageThat = layui.$(this),
                    _pageUrl = !status ? pageThat.attr('lay-edit') : pageThat.attr('lay-add');
                // 开始POST提交数据
                layui.$.post(_pageUrl,
                    post.field, function (res) {
                        if (res.code === 200) {
                            layer.msg(res.msg);
                            // 关闭当前窗口
                            table.reload('lay-tableList');
                            layer.close(colletction.index);
                            pageThat.attr("disabled", true);
                        }
                        else {
                            layer.error(res.msg);
                        }

                    }, 'json');

                return false;
            })
        }
    })
</script>